<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import request from '@/utils/request'
import ReleasePage from '@/views/admin/ReleasePage.vue'
import EditPage from '@/views/admin/EditPage.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface Article {
  id: string
  title: string
  content: string
  location: string
  createDate: string
  author: string
  groupId: string
}

const tableRowClassName = ({ row, rowIndex }: { row: Article; rowIndex: number }) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData = ref<Article[]>([])

const getArticleList = () => {
  request(`/admin/articles`).then((data) => {
    tableData.value = data
  })
}

onMounted(() => {
  getArticleList()
})

const dialogAddFormVisible = ref(false)
const dialogEditFormVisible = ref(false)

const editPageRef = ref(null)

const handleEdit = (index: number, id: string) => {
  dialogEditFormVisible.value = true

  nextTick(() => {
    if (editPageRef.value) {
      editPageRef.value.findById(id)
    }
  })
}

/**
 * 删除
 * @param index
 * @param id
 */
const handleDelete = (index: number, id: string) => {
  ElMessageBox.confirm('确认要删除这篇文章吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    request(`/admin/delete/${id}`, {}, 'DELETE').then(() => {
      ElMessage.success('删除操作成功')
    })
  })
}

/**
 * 下载
 * @param index
 * @param id
 */
const handleDownload = (index: number, id: string) => {
  const downloadMarkdown = (content: string, filename: string) => {
    const blob = new Blob([content], { type: 'text/markdown' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = filename
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  }

  request(`/admin/find?id=${id}`)
    .then((data: any) => {
      if (data && data.content && data.title) {
        downloadMarkdown(data.content, `${data.title}.md`)
      } else {
        ElMessage.error('下载失败:文章内容获取失败')
      }
    })
    .catch(() => {
      ElMessage.error('下载失败:请求出错')
    })
}
</script>

<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <el-button @click="dialogAddFormVisible = true">+</el-button>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="编号" width="120" />
      <el-table-column prop="title" label="标题" width="500" />
      <el-table-column prop="createDate" label="创建时间" />
      <el-table-column prop="author" label="作者编号" />
      <el-table-column prop="groupId" label="分类编号" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleDownload(scope.$index, scope.row.id)"
            plain
            type="success"
            >下载</el-button
          >
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row.id)"
            type="warning"
            plain
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            plain
            @click="handleDelete(scope.$index, scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="dialogAddFormVisible" title="文章发布" width="90%">
    <ReleasePage />
  </el-dialog>
  <el-dialog v-model="dialogEditFormVisible" title="文章编辑" width="90%">
    <EditPage ref="editPageRef" />
  </el-dialog>
</template>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: #fabdcc;
}

.el-table .success-row {
  --el-table-tr-bg-color: #8febe1;
}
</style>
